<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="800px" :top="'50px'" @open="openDialog"
        :destroy-on-close="true" :close-on-click-modal="false" :modal="!isRegister">
        <div class="fault-copy">
            <div style="display: flex;">
                <div>{{ $t('faultLibrary.faultObject.copyChoose') }}</div>
                <div class="fault-copy-tips">
                    <i class="el-icon-warning" />
                    <div class="fault-copy-tips-title">
                        {{ tipTitle }}
                    </div>
                </div>
            </div>
            <div class="fault-copy-content">
                <el-tree ref="copyTreeRef" :data="copyFaultList" :props="defaultProps" default-expand-all
                    @node-click="handleNodeClick">
                    <span class="custom-copy-tree-node" 
                        :class="{ 'select': currentKey == data.id, 'disabled': data.radioType == 0 }"
                        slot-scope="{ node, data }" trigger="hover" :key="data.id">
                        <span>
                            <span class="icon" v-if="data.faultLabel && data.relType == 0 || data.dataType == 2">
                                {{ data.faultLabel }}
                            </span>
                            <span class="icon" v-if="data.relType != 0 && data.dataType == 1">
                                {{ getRealTypeName(data.relType) }}
                            </span>
                            {{ node.label }}
                        </span>
                        <div class="copy-radio-group">
                            <div class="copy-radio-group-title" v-if="data.radioType != 0">{{ $t('faultLibrary.faultObject.copyTo') }}</div>
                            <div class="copy-radio-group-title" v-if="data.radioType == 0">{{ $t('faultLibrary.faultObject.tips7') }}</div>
                            <el-radio v-model="data.radio" label="1" v-if="data.radioType == 1 || data.radioType == 3">{{ $t('faultLibrary.faultObject.peer') }}</el-radio>
                            <el-radio v-model="data.radio" label="2" v-if="data.radioType == 2 || data.radioType == 3">{{ $t('faultLibrary.faultObject.sublevel') }}</el-radio>
                        </div>
                    </span>
                </el-tree>
            </div>
        </div>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">{{ $t('common.base.cancel') }}</el-button>
            <el-button type="primary" :loading="saveLoading" @click="copy">{{ $t('common.base.confirm') }}</el-button>
        </div>
    </el-dialog>
</template>
            
<script>
// api
import * as FaultApi from '@src/api/Fault';

export default {
    // 复制
    name: 'FaultCopy',

    data() {
        return {
            defaultProps: {
                children: 'childrenList',
                label: 'faultDesc',
            },
            loading: false,
            saveLoading: false,
            treeData: [],
            currentKey: '',
            radio: '2',
            copyFaultList:[],
            copyFaultType: 1,
            selectData: null,
            tipTitle: '',
            tipContent: '',
        }
    },

    props: {
        value: {
            type: Boolean,
            default: false
        },

        // 当前的id
        currentFaultCopyId: {
            type: String,
            default: ''
        },

        isRegister: {
            type: Boolean,
            default: false
        },

        faultList: {
            type: Array,
            default: ''
        }
    },

    computed: {
        dialogVisible: {
            get() {
                return this.value;
            },

            set(val) {
                this.$emit('input', val)
            }
        },


        title: {
            get() {
                return this.$t('faultLibrary.faultObject.title3')
            },
        },
    },

    methods: {
        handleNodeClick(data) {
            this.currentKey = data?.id;
            this.selectData = data;
        },

        openDialog() {
            this.currentKey = '';
            this.selectData = null;
            this.copyFaultList = JSON.parse(JSON.stringify(this.faultList));
            const data = this.findData(this.faultList, this.currentFaultCopyId);
            this.copyFaultType = this.getType(data);
            if (this.copyFaultType == 1) {
                this.copyFaultList.forEach(element => {
                    element.childrenList = null;
                    element.solutionList = null;
                });
                this.tipTitle = this.$t('faultLibrary.faultObject.tips4');
            } else if (this.copyFaultType == 2) {
                this.tipTitle = this.$t('faultLibrary.faultObject.tips5');
            } else {
                this.tipTitle = this.$t('faultLibrary.faultObject.tips6');
            }
            const list = JSON.parse(JSON.stringify(this.copyFaultList));
            this.copyFaultList = this.initRadioList(list);
        },

        // 获取当前节点的类型
        getType(data) {
            if (data.dataType == 2) {
                // 解决方案
                return 3;
            } else if (data.parentId == null) {
                // 故障现象
                return 1;
            } else {
                // 故障描述
                return 2;
            }
        },

        // 在树形结构中寻找当前id的数据
        findData(data, id) {
            for (let i = 0; i < data.length; i++) {
                if (data[i].id === id) {
                    return data[i];
                } else {
                    if (data[i].childrenList) {
                        const res = this.findData(data[i].childrenList, id);
                        if (res) {
                            return res;
                        }
                    }
                }
            }
        },

        // 初始化radioList
        initRadioList(data) {
            if (this.copyFaultType == 1) {
                for (let i = 0; i < data.length; i++) {
                   data[i].radio = '1';
                   data[i].radioType = '1';
                }
            } else if (this.copyFaultType == 2) {
                for (let i = 0; i < data.length; i++) {
                    if (this.getType(data[i]) == 1) {
                        data[i].radio = '2';
                        data[i].radioType = '2';
                    } else if (this.getType(data[i]) == 2 && data[i]?.solutionList?.length > 0) {
                        data[i].radio = '1';
                        data[i].radioType = '1';
                    } else if (this.getType(data[i]) == 2) {
                        data[i].radio = '1';
                        data[i].radioType = '3';
                    } else {
                        data[i].radio = '0';
                        data[i].radioType = '0';
                    }
                    data[i].childrenList ? data[i].childrenList = this.initRadioList(data[i].childrenList) : null;
                    data[i].solutionList ? data[i].solutionList = this.initRadioList(data[i].solutionList) : null;
                }
            } else {
                for (let i = 0; i < data.length; i++) {
                    if (this.getType(data[i]) == 2 && (data[i].childrenList == null || data[i]?.solutionList?.length > 0)) {
                        data[i].radio = '2';
                        data[i].radioType = '2';
                    } else {
                        data[i].radio = '0';
                        data[i].radioType = '0';
                    }
                    data[i].childrenList ? data[i].childrenList = this.initRadioList(data[i].childrenList) : null;
                    data[i].solutionList ? data[i].solutionList = this.initRadioList(data[i].solutionList) : null;
                }
            }
            return data;
        },

        getRealTypeName(type) {
            return ['', this.$t('common.base.product'), this.$t('common.form.type.material'), this.$t('common.base.sparePart')][type]
        },

        // 提交
        copy() {
            if (this.selectData == null) {
                this.$message({
                    message: this.$t('common.base.pleaseSelect'),
                    type: 'warning'
                });
            } else if (this.selectData.radio == '0') {
                this.$message({
                    message: this.$t('faultLibrary.faultObject.tips7'),
                    type: 'error'
                });
            } else {
                const params = {
                    id: this.currentFaultCopyId,
                    parentId: this.selectData.radio == '1' ? this.selectData.parentId : this.selectData.id,
                    dataType: this.copyFaultType == 1 || this.copyFaultType == 2? 1 : 2,
                }
                FaultApi.copyFault(
                    params
                ).then(res => {
                    if (res.success == true) {
                        this.$message({
                            message: this.$t('common.base.tip.copySuccess'),
                            type: 'success'
                        }); 
                    } else {
                        this.$message({
                            message: res.message,
                            type: 'error'
                        });
                    }
                    this.$emit('operateSuc');
                    this.dialogVisible = false;
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.icon {
    background: #F4F4F5;
    border: 1px solid #E9E9EB;
    line-height: 20px;
    border-radius: 2px;
    padding: 0px 8px;
    margin-right:8px;
    color: #909399;
    font-size:12px;
}

.fault-copy-tips {
    position: absolute;
    right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(140, 140, 140);

    .fault-copy-tips-title {
        margin-left: 5px;
    }
}

.fault-copy-content {
    margin-top: 10px;
    width: 100%;
    height: calc(100vh - 300px);
    overflow: auto;
    border: 1px solid rgb(229, 229, 229);

    .disabled {
        .copy-radio-group {
            background-color: transparent !important;
        }
    }

    .custom-copy-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 8px;
        font-size: 14px;
        overflow: hidden;

        .copy-radio-group {
            height: 38px;
            line-height: 40px;
            display: flex;
            align-items: center;
            padding-right: 10px;
            background-color: rgb(245, 247, 250);
            visibility: hidden;
            position: absolute;
            right: 0;

            .copy-radio-group-title {
                color: rgb(140, 140, 140) !important;
            }

            ::v-deep .el-radio {
                margin: 0 0 0 10px;
                line-height: 30px;
            }
        }
    }
}

::v-deep .el-tree-node__content {

    .custom-copy-tree-node:not(:has(.disabled)).select,
    &:hover {

        .copy-radio-group {
            visibility: visible;
            background-color: rgb(245, 247, 250);
        }
    }
}

::v-deep .el-tree-node__content:has(.select):not(:has(.disabled)) {
    background-color: rgb(245, 247, 250);
    border-bottom: 2px solid $color-primary-light-6;
}

::v-deep .el-tree-node__content:not(:has(.disabled)):hover {
    background-color: rgb(245, 247, 250);
    border-bottom: 2px solid $color-primary-light-6;
}

::v-deep .el-tree {
    padding-right: 16px;
}

::v-deep .el-tree-node{
    .el-tree-node__children {
        overflow: visible;
    }
}
</style>